<!-- 首页 -->
<template>
  <div style="padding-left:20px;">
    <div class="title">
      <div class="fll">
        <div style="float:left">
          <img src="@/assets/images/logo.png" width="60" height="60" alt="">
        </div>

        <div class="titleText">
          <p style="font-size:.38rem;">{{timeText}} {{name}}，欢迎使用能源管理系统！</p>
          <p class="titleDate">{{day}} {{week}} 登录IP:{{loginIp}}</p>
        </div>
      </div>
      <div class="flr">
        <div class="titleRight">
          <p class="titleNameSize">名下电表</p>
          <p class="titleNum">5/ 24</p>
        </div>
        <div class="titleRight">
          <p class="titleNameSize">名下水表</p>
          <p class="titleNum">5/ 24</p>
        </div>
        <div class="titleRight">
          <p class="titleNameSize">名下气表</p>
          <p class="titleNum">5/ 24</p>
        </div>
      </div>
    </div>
    <!-- <el-row>
      <el-col  :span="12">
        <div class="tabList1">营收情况</div>
        <div class="tabList">
          <el-radio-group v-model="tabPosition" @change="tabClick">
            <el-radio-button label="day" >今日</el-radio-button>
            <el-radio-button label="week">本周</el-radio-button>
            <el-radio-button label="month">本月</el-radio-button>
          </el-radio-group>
        </div>
        <indexPie id="onePie" ref="onePie" :dataPie="onePie"></indexPie>
      </el-col>
      <el-col :span="12">
        <div class="tabList1">营收方式</div>
        <div class="tabList">
          <el-radio-group v-model="tabPosition" @change="tabClick">
            <el-radio-button label="day" >今日</el-radio-button>
            <el-radio-button label="week">本周</el-radio-button>
            <el-radio-button label="month">本月</el-radio-button>
          </el-radio-group>
        </div>
        <twoPie id="twoPie" ref="twoPie" :dataPie="twoPie"></twoPie>
      </el-col>
    </el-row> -->
    <el-row style="padding-bottom:10px;">
      <el-col :span="8">
        <div class="tabList">
          <el-radio-group v-model="tabPosition" @change="tabClick">
            <el-radio-button label="day">今日</el-radio-button>
            <el-radio-button label="week">本周</el-radio-button>
            <el-radio-button label="month">本月</el-radio-button>
          </el-radio-group>
        </div>
        <oneLine id="oneLine" ref="oneLine" lineTitle="水用量（m³）" :dataLine="oneLine"></oneLine>
      </el-col>
      <el-col :span="8">
        <div class="tabList">
          <el-radio-group v-model="tabPosition" @change="tabClick">
            <el-radio-button label="day">今日</el-radio-button>
            <el-radio-button label="week">本周</el-radio-button>
            <el-radio-button label="month">本月</el-radio-button>
          </el-radio-group>
        </div>
        <twoLine id="twoLine" ref="twoLine" lineTitle="电用量（kW·h）" :dataLine="twoLine"></twoLine>
      </el-col>
      <el-col :span="8">
        <div class="tabList">
          <el-radio-group v-model="tabPosition" @change="tabClick">
            <el-radio-button label="day">今日</el-radio-button>
            <el-radio-button label="week">本周</el-radio-button>
            <el-radio-button label="month">本月</el-radio-button>
          </el-radio-group>
        </div>
        <threeLine id="threeLine" ref="threeLine" lineTitle="气用量（m³）" :dataLine="threeLine"></threeLine>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import indexPie from 'component/chart/indexPie'
import twoPie from 'component/chart/indexPie'
import oneLine from 'component/chart/indexLine'
import twoLine from 'component/chart/indexLine'
import threeLine from 'component/chart/indexLine'
export default {
  components: { indexPie, twoPie, oneLine, twoLine, threeLine },
  data () {
    return {
      name: JSON.parse(sessionStorage.getItem('userInfo')).name,//用户名
      day: sessionStorage.getItem('loginTime'),//登录时间
      week: '',//显示星期几
      timeText: '',//显示早上、中午、晚上
      loginIp: sessionStorage.getItem('ip'),//登录ip
      tabPosition: 'day',
      getTime: {},
      oneLine: [820, 932, 901, 934, 1290, 1330, 1320],
      twoLine: [82, 93, 90, 934, 120, 130, 130],
      threeLine: [820, 932, 91, 934, 190, 1330, 320],
      onePie: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      twoPie: [
        { value: 222, name: '直接访问' },
        { value: 111, name: '邮件营销' },
        { value: 354, name: '联盟广告' },
        { value: 234, name: '视频广告' },
        { value: 456, name: '搜索引擎' }
      ],
    }
  },
  methods: {
    //点击tab触发
    tabClick (row) {
      let getTime = this.common.getTime(row)//获取今日、本周、本月
      console.log(getTime)
    },
    //获取星期
    getWeekDay () {
      let time = this.moment().format('H')//获取小时
      if (time < 6) { this.timeText = "凌晨好！" }
      else if (time < 12) { this.timeText = "早上好！" }
      else if (time < 15) { this.timeText = "中午好！" }
      else if (time < 17) { this.timeText = "下午好！" }
      else if (time < 24) { this.timeText = "晚上好！" }
      this.week = this.moment().format('dddd')//获取英文星期
      //判断当前是星期几，转换成中文字符
      switch (this.week) {
        case 'Monday': this.week = '星期一'; break;
        case 'Tuesday': this.week = '星期二'; break;
        case 'Wednesday': this.week = '星期三'; break;
        case 'Thursday': this.week = '星期四'; break;
        case 'Friday': this.week = '星期五'; break;
        case 'Saturday': this.week = '星期六'; break;
        case 'Sunday': this.week = '星期日'; break;
      }
    }
  },
  mounted () {
    this.common.getTime(this.tabPosition)
    window.onresize = () => {
      // this.$refs.onePie.myChart.resize();
      // this.$refs.twoPie.myChart.resize();
      this.$refs.oneLine.myChart.resize();
      this.$refs.twoLine.myChart.resize();
      this.$refs.threeLine.myChart.resize();
    };
  },
  created () {
    this.getWeekDay();
  },
  destroyed () {
    window.onresize = "";
  }
}
</script>
<style scoped>
.tabList {
  padding-top: 0.2rem;
  overflow: auto;
  float: right;
  margin-right: 1rem;
}
.tabList1 {
  position: relative;
  top: 0.55rem;
  overflow: auto;
  float: left;
  margin-left: 1rem;
  font-size: 0.36rem;
}
.title {
  border: 1px solid #e5e5e5;
  padding: 0.2rem;
  margin-top: 0.25rem;
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
}
.titleText {
  float: left;
  margin-left: 0.3rem;
}
.titleDate {
  font-size: 0.26rem;
  color: #999;
  margin-top: 0.2rem;
}
.titleNum {
  font-size: 0.46rem;
  margin-top: 0.2rem;
}
.titleRight {
  float: left;
  margin-left: 1rem;
}
.titleNameSize {
  font-size: 0.26rem;
  color: #999;
}
</style>